<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加学生信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
            padding: 20px;
        }
    </style>
</head>
<body>
<!-- 关键修改：将<div>改为<form>标签 -->
<form class="layui-form layuimini-form">
    <!-- 姓名（必填） -->
    <div class="layui-form-item">
        <label class="layui-form-label required">姓名</label>
        <div class="layui-input-block">
            <input type="text"
                   name="studentName"
                   lay-verify="required"
                   lay-reqtext="姓名不能为空"
                   placeholder="请输入姓名（如：张三）"
                   value=""
                   class="layui-input">
        </div>
    </div>
    <!-- 所属学院 -->
    <div class="layui-form-item">
        <label class="layui-form-label">所属学院</label>
        <div class="layui-input-block">
            <input type="text"
                   name="institute"
                   placeholder="请输入学院（如：计算机学院）"
                   value=""
                   class="layui-input">
        </div>
    </div>
    <!-- 所属专业 -->
    <div class="layui-form-item">
        <label class="layui-form-label">所属专业</label>
        <div class="layui-input-block">
            <input type="text"
                   name="major"
                   placeholder="请输入专业（如：计算机科学与技术）"
                   value=""
                   class="layui-input">
        </div>
    </div>
    <!-- 年级 -->
    <div class="layui-form-item">
        <label class="layui-form-label">年级</label>
        <div class="layui-input-block">
            <input type="text"
                   name="grade"
                   placeholder="请输入年级（如：2021级）"
                   value=""
                   class="layui-input">
        </div>
    </div>
    <!-- 班级 -->
    <div class="layui-form-item">
        <label class="layui-form-label">班级</label>
        <div class="layui-input-block">
            <input type="text"
                   name="clazz"
                   placeholder="请输入班级（如：计科1班）"
                   value=""
                   class="layui-input">
        </div>
    </div>
    <!-- 性别 -->
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="text"
                   name="sex"
                   placeholder="请输入性别（如：男/女）"
                   value=""
                   class="layui-input">
        </div>
    </div>
    <!-- 电话号码（格式验证） -->
    <div class="layui-form-item">
        <label class="layui-form-label">电话号码</label>
        <div class="layui-input-block">
            <input type="text"
                   name="tel"
                   lay-verify="phone"
                   lay-reqtext="手机号格式错误"
                   placeholder="请输入11位手机号（如：138XXXX1234）"
                   value=""
                   class="layui-input">
        </div>
    </div>
    <!-- 身份证号（格式验证） -->
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号</label>
        <div class="layui-input-block">
            <input type="text"
                   name="cardId"
                   lay-verify="idcard"
                   lay-reqtext="身份证格式错误"
                   placeholder="请输入18位身份证号（如：110101XXXX12345678）"
                   value=""
                   class="layui-input">
        </div>
    </div>
    <!-- 邮箱（格式验证） -->
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text"
                   name="email"
                   lay-verify="email"
                   lay-reqtext="邮箱格式错误"
                   placeholder="请输入邮箱（如：zhangsan@example.com）"
                   value=""
                   class="layui-input">
        </div>
    </div>
    <!-- 密码（必填） -->
    <div class="layui-form-item">
        <label class="layui-form-label required">密码</label>
        <div class="layui-input-block">
            <input type="password"
                   name="pwd"
                   lay-verify="required"
                   lay-reqtext="密码不能为空"
                   placeholder="请输入密码（不超过16位）"
                   value=""
                   class="layui-input">
        </div>
    </div>
    <!-- 提交/重置按钮 -->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认添加</button>
            <!-- 重置按钮（type="reset"） -->
            <button type="reset" class="layui-btn layui-btn-primary">重置表单</button>
        </div>
    </div>
</form> <!-- 关闭<form>标签 -->

<!-- 引入依赖 -->
<script src="../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        // 表单验证（Layui自带规则）
        form.verify({
            // 可添加自定义验证规则（如密码强度）
        });

        // 监听提交事件（保持不变）
        form.on('submit(saveBtn)', function (data) {
            const studentData = {
                studentName: data.field.studentName,
                institute: data.field.institute,
                major: data.field.major,
                grade: data.field.grade,
                clazz: data.field.clazz,
                sex: data.field.sex,
                tel: data.field.tel,
                cardId: data.field.cardId,
                email: data.field.email,
                pwd: data.field.pwd,
                role: '2' // 学生角色（根据数据库注释）
            };

            // 发送POST请求（保持不变）
            axios.post('/student', studentData)
                .then(function (response) {
                    const res = response.data;
                    if (res.code === 200) {
                        layer.msg('添加学生成功！', {icon: 1, time: 1500}, function () {
                            const iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                            if (parent.layui && parent.layui.table) {
                                parent.layui.table.reload('currentTableId');
                            }
                        });
                    } else {
                        layer.msg('添加失败：' + (res.msg || '未知错误'), {icon: 2, time: 2000});
                    }
                })
                .catch(function (error) {
                    layer.msg('请求失败：' + error.message, {icon: 2, time: 2000});
                });

            return false; // 阻止默认提交
        });
    });
</script>
</body>
</html>